<template>
  <div class="hello">
    <div class="Eltab">
      <div class="sculptureBox">
        <el-image
          :src="src"
          :fit="fit" class="sculpture"></el-image>
      </div>
      <div class="leftBar">
        <div class="trapeziumF">
          <el-link  :underline="false" @click.prevent="comName = 'login'">登陆</el-link>
        </div>
        <div class="trapeziumS">
          <el-link :underline="false" @click.prevent="comName = 'register'">注册</el-link>
        </div>
      </div>
      <div class="rightContent borderRadius">
        <transition mode="out-in" enter-active-class="rotateInUpLeft" leave-active-class="rotateOutUpLeft">
          <component :is="comName" class="animated"></component>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import login from './children/login.vue'
  import register from './children/register.vue'

  export default {
    name: 'enter',
    data () {
      return {
        comName:'login',
        src:'../static/img/index.jpg',
        fit:'fill'
      }
    },
    components:{
        login,
        register
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .borderRadius {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
  }
  .trapeziumF,.trapeziumS{
    border-top: 40px solid #7fcbe470;
    border-right: 37px solid transparent;
    border-left:37px solid transparent;
    width: 100px;
    height:0 ;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    left: -82px;

  }
  .trapeziumF{
    top:72px;
  }
  .trapeziumS{
    top:262px;
  }
  .hello>.Eltab{
    display: flex;
    width:600px;
    height:400px;
    position: absolute;
    top: calc(50% - 200px);
    left: calc(50% - 350px);
  }
  .el-tabs__nav-next,.el-tabs__nav-prev{
    display: none;;
  }
  .leftBar{
    display: flex;
    flex: 0.5;
    flex-direction: column;
    background-color: #ffffff00;
    position: relative;
  }
  .leftBar a{
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    height:50%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    top:-20px;
    left:4px;
  }
  .el-link.el-link--default{
    color: green;
    display:inline-block !important;
    width: 30px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .el-link.el-link--default:hover{
    color: white !important;
  }
  .rightContent{
    flex: 9.5;
    background-color: white;
    -webkit-box-shadow:0 0 8px 1px #7272a9;
    -moz-box-shadow:0 0 8px 1px #7272a9;
    box-shadow:0 0 8px 1px #7272a9;
    min-height: 550px;
  }
  .sculptureBox{
    width: 120px;
    height: 120px;
    background-color: white;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    position: absolute;
    z-index: 999;
    top: -62px;
    left:246px;
    -webkit-box-shadow:0 0 8px 2px #69a2e8;
    -moz-box-shadow:0 0 8px 2px #69a2e8 ;
    box-shadow:0 0 8px 2px #69a2e8;
    overflow: hidden;
    border: 5px solid white;
  }
  div.el-image{
    width: 100%;
    height: 100%;
  }
</style>
